<template>
	<view @click="jumpAction">
		<view class="u-p-t-32 flex-between">
			<view>
				<view class="u-m-t-12 u-m-b-14 flex-center" @click="jumpUrl(`/pages/user/personal/index/index?userId=${ item.userId }`)">
					<view class="u-avatar-42 clear-flex">
						<x-image :src="showImage(item.userHeadImgUrl, 'logo')" />
					</view>
					<view class="u-f-28 u-lh-40 u-m-l-10 font-medio">{{ item.userNick }}</view>
				</view>
				
				<x-rate :value="item.score || 5" :text="dealText(item.score || 5)"></x-rate>
			</view>
			
			<view class="u-f-20 u-lh-28">{{ formatTime(item.createTime) }}</view>
		</view>
		
		<view class="u-f-26 u-lh-36 u-p-t-28">{{ item.content || '' }}</view>
		
		<view class="u-p-t-22 u-p-b-26">
			<u-row :gutter="30">
				<u-col
				v-for="(_item, _index) in images"
				:key="_index"
				:span="4">
					<view class="flex-center-center u-p-t-10">
						<view :class="['comment-img clear-flex']" @click="previewImage(images.map(__item => baseUrl + __item), _index)">
							<x-image :src="showImage(_item)" mode="aspectFill"/>
							<view v-if="max > -1 && _index === (max - 1) && max < originImages.length" class="image-mask flex-center-center" @click.stop="previewImage(originImages.map(__item => baseUrl + __item), _index)">
								<view>{{ lang_common.see_more }}</view>
							</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		
		<view class="u-f-26 u-lh-36 color-grew">
			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: () => ({})
			},
			max: {
				default: 3
			},
			pageUrl: {
				type: String,
				default: '/pages/other/comment/note'
			}
		},
		computed: {
			originImages() {
				return this.dealImage(this.item.imgUrls).map(item => item.type === 'video' ? item.cover : item.fileUrl) || []
			},
			images() {
				let arr = this.originImages || []
				return arr.length > this.max ? arr.slice(0, this.max) : arr
			},
		},
		methods: {
			dealText(value) {
				let text = ''
				if (value < 2) {
					text = 'rate_bad'
				} else if (2 <= value && value <= 3) {
					text = 'rate_normal'
				} else {
					text = 'rate_good'
				}
				return this.lang_goods[text]
			},
			jumpAction() {
				if (this.pageUrl) {
					// let url = this.pageUrl + (this.item.commentId ? `?notesId=${ this.item.commentId }` : '')
					// console.log(this.pageUrl, url)
					// this.jumpUrl(url)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.comment-img {
		position: relative;
		top: 0;
		left: 0;
		z-index: 0;
		width: 200rpx;
		height: 168rpx;
		overflow: hidden;
		background-color: #f9f9f9;
		
		.image-mask {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10888;
			width: 100%;
			height: 100%;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, .3);
		}
	}
</style>
